<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<%= title %> - 视频分享平台">
    <title><%= title %></title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="/images/logo.png" as="image">
    
    <!-- CSS引入 -->
    <%- include("viewImport/css.ejs") %>
    <link rel="stylesheet" href="stylesheets/pageStyle/index.css">
    <link rel="stylesheet" href="stylesheets/base.css">
    
    <!-- JavaScript引入 -->
    <%- include("viewImport/js.ejs") %>
</head>
<body>
    <!-- 头部导航 -->
    <header class="site-header">
        <div class="headerNav container-fluid">
            <%- include("common/nav.ejs", {mainNav: mainNav}) %>
            <div class="logoBox">
                <a href="/" aria-label="首页">
                    <img src="/images/logo.png" alt="<%= title %> Logo" width="150" height="50">
                </a>
            </div>
        </div>
        
        <!-- 公告栏 -->
        <div class="announcement-bar container-fluid">
            <div class="placardBox">
                <i class="fa fa-bullhorn" aria-hidden="true"></i>
                <span class="announcement-text"><%= placard[0] %></span>
            </div>
        </div>
    </header>

    <!-- 主导航标签 -->
    <nav class="sub-navigation container-fluid">
        <%- include("index/primaryPageTab.ejs", {NavItems:NavItems}) %>
    </nav>

    <!-- 主要内容区 -->
    <main>
        <!-- 首推内容区 -->
        <section class="featured-content container-fluid">
            <div class="row">
                <!-- 轮播图区域 -->
                <div class="carouselBox col-md-4 col-sm-12">
                    <%- include("common/carousel.ejs", {carousel:carouselList[0]}) %>
                </div>

                <!-- 特色视频区域 -->
                <div class="VideosSummaryBox col-md-8 col-sm-12">
                    <div class="videos-container">
                        <% videoObjectList.specialObject.videosLineList.forEach(function (videosLine) { %>
                            <%- include("common/videosLine.ejs", {videosLine:videosLine, type:videoObjectList.specialObject.type}) %>
                        <% }) %>
                    </div>
                    
                    <!-- 导航控制 -->
                    <div class="navigation-controls">
                        <button class="nav-button prev" aria-label="上一页">
                            <i class="fa fa-chevron-left" aria-hidden="true"></i>
                        </button>
                        <button class="nav-button next" aria-label="下一页">
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 广告区域1 -->
        <section class="ad-section container-fluid">
            <%- include("common/guangGao.ejs", {img: img, link:link}) %>
        </section>
        
        <!-- 默认视频列表 -->
        <section class="video-section container-fluid">
            <div class="video-grid">
                <% videoObjectList.defaultObject.videosLineList.forEach(function (videosLine) { %>
                    <%- include("common/videosLine.ejs", {videosLine:videosLine, type:videoObjectList.defaultObject.type}) %>
                <% }) %>
            </div>
        </section>

        <!-- 广告区域2 -->
        <section class="ad-section container-fluid">
            <%- include("common/guangGao.ejs", {img: img, link:link}) %>
        </section>
        
        <!-- 图片视频列表 -->
        <section class="image-video-section container-fluid">
            <div class="image-video-grid">
                <% videoObjectList.imageObject.videosLineList.forEach(function (videosLine) { %>
                    <%- include("common/videosLine.ejs", {videosLine:videosLine, type:videoObjectList.imageObject.type}) %>
                <% }) %>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="site-footer">
        <%- include("common/footer_default.ejs", {footer:footer}) %>
    </footer>

    <!-- 添加懒加载和其他增强功能的脚本 -->
    <script>
        // 图片懒加载
        document.addEventListener('DOMContentLoaded', function() {
            const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
            
            if ('IntersectionObserver' in window) {
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove('lazy');
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });
                
                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            }
            
            // 导航按钮功能
            const prevButton = document.querySelector('.nav-button.prev');
            const nextButton = document.querySelector('.nav-button.next');
            const videosContainer = document.querySelector('.videos-container');
            
            if (prevButton && nextButton && videosContainer) {
                prevButton.addEventListener('click', function() {
                    videosContainer.scrollBy({
                        left: -300,
                        behavior: 'smooth'
                    });
                });
                
                nextButton.addEventListener('click', function() {
                    videosContainer.scrollBy({
                        left: 300,
                        behavior: 'smooth'
                    });
                });
            }
        });
    </script>
</body>
</html>
